<template>
  <div class="code-copy-button">
    <button 
      @click="copyCode"
      class="absolute top-2 right-2 p-1.5 rounded-md transition-all duration-300 opacity-70 hover:opacity-100"
      :class="{
        'bg-primary/10 text-primary hover:bg-primary hover:text-white': !isDark,
        'bg-secondary/10 text-secondary hover:bg-secondary hover:text-dark': isDark,
        'bg-green-500/20 text-green-500': copied
      }"
      :title="copied ? '已复制！' : '复制代码'"
    >
      <i :class="copied ? 'pi pi-check' : 'pi pi-copy'" class="text-sm"></i>
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  code: {
    type: String,
    required: true
  },
  isDark: {
    type: Boolean,
    default: false
  }
});

const copied = ref(false);

const copyCode = () => {
  navigator.clipboard.writeText(props.code)
    .then(() => {
      copied.value = true;
      setTimeout(() => {
        copied.value = false;
      }, 2000);
    })
    .catch(err => {
      console.error('复制失败:', err);
    });
};
</script>

<style scoped>
.code-copy-button button {
  backdrop-filter: blur(4px);
}
</style>